<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('服务订阅套餐')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-goods-edit" th:object="${goods}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label">名称：</label>
                <div class="col-sm-8">
                    <input name="name" th:field="*{name}" class="form-control" type="text" maxlength="255">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">应用名称：</label>
                <div class="col-sm-8">
                    <select name="productId" th:field="*{productId}" class="form-control m-b " required onchange="selectGoodsTypeClick(this)">
                        <option value="">请选择应用</option>
                        <option th:each="product:${productList}" th:text="${product.name}" th:value="${product.id}" th:field="*{productId}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">服务类型：</label>
                <div class="col-sm-8">
                    <select name="goodsTypeId"  th:field="*{goodsTypeId}"  class="form-control m-b " required>
                        <option value="">请选择服务类型</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">标识：</label>
                <div class="col-sm-8">
                    <input name="identify" th:field="*{identify}" class="form-control" type="text" maxlength="20">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">周期：</label>
                <div class="col-sm-8">
                    <select name="cycle" th:with="type=${@dict.getType('sys_goods_cycle')}" class="form-control">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{cycle}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">输入小时数：</label>
                <div class="col-sm-8">
                    <input placeholder="单位为小时，数字自定义，只支持整数" name="cycle1" th:field="*{cycle1}" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">售价：</label>
                <div class="col-sm-8">
                    <input name="salePrice" th:field="*{salePrice}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">原价：</label>
                <div class="col-sm-8">
                    <input name="costPrice" th:field="*{costPrice}" class="form-control" type="text">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">显示顺序：</label>
                <div class="col-sm-8">
                    <input name="sort" th:field="*{sort}" class="form-control" type="number" maxlength="5">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">是否上架：</label>
                <div class="col-sm-8">
                    <select name="isShelf" th:with="type=${@dict.getType('sys_business_yes_no')}" class="form-control">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isShelf}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">介绍：</label>
                <div class="col-sm-8">
                    <textarea name="introduction" class="form-control" maxlength="512">[[*{introduction}]]</textarea>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label">详细描述：</label>
                <div class="col-sm-8">
                    <textarea name="desc" class="form-control" maxlength="1024">[[*{desc}]]</textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <div class="file-loading">
                        <input id="singleFile" name="file" type="file">
                    </div>
                    <input th:field="*{icon}" type="hidden">
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "product/goods";
        $("#form-goods-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/saveOrUpdate", $('#form-goods-edit').serialize());
            }
        }

        $(function() {
            let goodsTypeId = [[${goods.goodsTypeId}]];
            let productId = $("#productId").val();
            if (productId != "" && productId != null){
                selectGoodsType(productId,goodsTypeId);
            }

            var icon = $("#icon").val();
            // 单图上传
            $("#singleFile").fileinput({
                uploadUrl: ctx + 'common/upload',
                initialPreviewAsData: true,
                initialPreview: [icon],
                maxFileCount: 1,
                autoReplace: true
            }).on("filebatchselected", function(event, files) {
                $(this).fileinput("upload");
            }).on("fileuploaded", function(event, data) {
                var rsp = data.response;
                $("#icon").val(rsp.url);
            });
        });
        function selectGoodsTypeClick(obj){
            let productId = obj.value;
            selectGoodsType(productId,"");
        }
        function selectGoodsType(productId,goodsTypeId){
            $.ajax({
                type: "GET",
                url: prefix+"/selectGoodsType?productId="+productId,
                dataType: "JSON",
                success: function(data, textStatus, jqXHR) {
                    var text = "<option value=\"\">请选择服务类型</option>";
                    for(var i = 0;i<data.length;i++){
                        if (goodsTypeId == data[i].id){
                            text += '<option value='+data[i].id+' selected>'+data[i].name+'</option>';
                        }else {
                            text += '<option value='+data[i].id+'>'+data[i].name+'</option>';
                        }
                    }
                    $("#goodsTypeId").html(text);
                },
                error: function(xhr, textStatus) {
                    var _errorMsg = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">' + xhr.responseText + '</div></td></tr>'
                    $tbody.html(_errorMsg);
                },
            });
        }

    </script>
</body>
</html>